<template>
	<view >
		<!-- 头部区域 -->
		<view class="header" >
			<text class="title">ToDoList</text>
			<input type="text" class="todo-item" placeholder="请输入需要做的任务" required="required" autocomplete="off" 
				v-model="itemValue" @confirm="finishInput()"/>   
		</view>
		
		<!-- 主体记录部分 -->
		<view class="section">
			<h2 class="info">
				<span>正在进行</span>
				<span class="todocount">{{todocount}}</span>
			</h2>
			<ol class="todolist">
				<li class="todolist-item" v-for="(item,index) in todoList" :key="index">
					<i class="iconfont icon-weiwancheng" @click="itemFinished(item)"></i>
					{{item}}
					<i class="iconfont icon-delete2" @click="deleteItem(item,'todolist')"></i>
				</li>
			</ol>
			
			<h2 class="info">
				<span>已经完成</span>
				<span class="donecount">{{donecount}}</span>
			</h2>
			<ul class="donelist">
				<li class="donelist-item" v-for="(item,index) in doneList" :key="index">
					<i class="iconfont icon-wancheng"></i>
					{{item}}
					<i class="iconfont icon-delete2" @click="deleteItem(item,'donelist')"></i>
				</li>
			</ul>	   
		</view>
		
		<!-- 背景部分 -->
		<view class>
			<view class="mountain1"></view>
			<view class="mountain2"></view>
			<view class="bear"></view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				itemValue: '',
				todocount: 10,
				donecount: 12,
				todoList: [],
				doneList: [],
			}
		},
		onLoad() {
			this.refresh()
		},
		methods: {
			refresh() {
				const res = uni.getStorageSync('todolist');
				res.length === 0 ? this.todoList = [] : this.todoList = res;
				// console.log(this.todoList)
				this.todocount = res.length
				
				const res2 = uni.getStorageSync('donelist');
				res2.length === 0 ? this.doneList = [] : this.doneList = res2;
				this.donecount = res2.length
			},
			finishInput() {
				const res = uni.getStorageSync('todolist');
				// console.log(res)
				// 说明不存在donelist
				if( res.length === 0) {
					uni.setStorage({
						key: 'todolist',
						data: [this.itemValue],
					})
				}else{
					res.push(this.itemValue)
					uni.setStorage({
						key: 'todolist',
						data: res
					})
				}
				this.itemValue = ''
				setTimeout(() => this.refresh(), 0)
				console.log(this.todoList, this.doneList)
			},
			deleteItem(item, type) {
				let res = uni.getStorageSync(type)
				res = res.filter( listItem => listItem !== item)
				uni.setStorageSync(type, res)
				this.refresh()
			},
			itemFinished(item) {
				this.doneList = [...this.doneList, item]
				uni.setStorageSync('donelist', this.doneList)
				this.deleteItem(item, 'todolist')
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
	  font-family: "iconfont"; /* Project id 2823529 */
	  src: url('//at.alicdn.com/t/font_2823529_qwhwzbcreq.woff2?t=1632017886137') format('woff2'),
	       url('//at.alicdn.com/t/font_2823529_qwhwzbcreq.woff?t=1632017886137') format('woff'),
	       url('//at.alicdn.com/t/font_2823529_qwhwzbcreq.ttf?t=1632017886137') format('truetype');
	}
	
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.icon-delete2:before {
	  content: "\e7a5";
	}
	
	.icon-weiwancheng:before {
	  content: "\e687";
	}
	
	.icon-wancheng:before {
	  content: "\e653";
	}

	page {
		background-color: #CDCDCD;
	}
	.header {
		display: flex;
		height: 100rpx;
		background-color: #000;
		color: #fff;
		justify-content: center;
		align-items: center;
		.title {
			flex: 1;
			text-align: center;
			font-size: 30rpx;
		}
		.todo-item {
			margin-right: 35rpx;
			flex: 2;
			background-color: #fff;
			font-size: 25rpx;
			color: #000;
			border-radius: 5rpx;
			padding: 0 5rpx
		}
	}
	
	.section {
		padding: 15rpx 20rpx 0;
		.info {
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			font-size: 40rpx;
			span:nth-child(1) {
				font-weight: 600;
			}
		}
		.todocount, .donecount {
			padding: 10rpx;
			background-color: #E6E6FA;
			border-radius: 50%;
			color: #666;
			text-align: center;
			font-size: 30rpx;
			min-width: 40rpx;
			min-height: 40rpx;
		}
		.todolist, .donelist {
			box-sizing: border-box;
			width: 100%;
			.todolist-item, .donelist-item {
				display: flex;
				align-items: center;
				margin: 20rpx;
				padding: 10rpx;
				border-radius: 5rpx;
				border-left: 10rpx solid #629A9C;
				background-color: #fff;
			}
			.iconfont {
				padding:0 10rpx;
			}
			.icon-delete2 {
				position: absolute;
				right: 50rpx;
			}
		}
		.donelist-item {
			opacity: .5;
			border-left: 10rpx solid #B3B3B3 !important;
		}
	}
	
	.bear {
	    position: absolute;
	    bottom: 50rpx;
	    width: 100px;
	    height: 50px;
		background: url() no-repeat;
		background-size: 800px 50px !important;
	    animation: bear .5s steps(8) infinite, moveCenter 3s forwards;
	    z-index: 999;
	}
	
	.mountain1,
	.mountain2 {
	    position: absolute;
	    bottom: 0;
	    width: 100%;
	    height: 168px;
	    z-index: 2;
		background: url() repeat;
		background-size: 1920px 168px !important;
	    animation: mountainMove 10s linear infinite ;	
	}
	
	.mountain2 {
	    z-index: 1;
		background: url() repeat;
	}
	
	@keyframes mountainMove {
	    100% {
	        background-position: -1920px 0;
	    }
	}
	
	@keyframes bear {
	    100% {
	        background-position: -800px 0;
	    }
	}
	
	@keyframes moveCenter {
	    0% {
	        left: 0;
	    }
	
	    100% {
	        left: 50%;
	        transform: translateX(-50%);
	    }
	}
</style>
